<template>
	<view class="content">
		
		<view class="container">
			<view class="hedaer_title">
				<view class="content">
					<!-- 简化标题逻辑 -->
					<text class="type-title">{{getTitle(data.type)}}</text>
				</view>
			</view>
		
			<!-- 列表内容 -->
			<ListCard v-if="data.type == 0" :articleList="data.lifeList"></ListCard>
			<ListCard v-if="data.type == 1" :articleList="data.abilityList"></ListCard>
			<ListCard v-if="data.type == 2" :articleList="data.hotList"></ListCard>
		
			<!-- 空状态优化 -->
			<view v-if="data.empty" class="empty-box">
				<text class="empty-text">没有更多内容了～</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import ListCard from '../../components/list_card.vue'
	import {
		onLoad,
		onReachBottom,
		onShow
	} from '@dcloudio/uni-app'
	import {
		getAbilityArticle,
		getLifeArticle,
		getHotArticle
	} from '../../api/api.js'
	import {
		reactive
	} from 'vue'
	const data = reactive({
		empty: false,
		type: null,
		hotList: [],
		lifeList: [],
		abilityList: [],
		currentPage: 1
	})
	const getTitle = (type) => {
		const titles = ['生活博客', '技术博客', '热门文章']
		return titles[type] || '文章列表'
	}

	const handleBack = () => {
		uni.navigateBack()
	}

	const _life = async (e) => {
		await getLifeArticle({
			currentPage: data.currentPage
		}).then(res => {
			console.log(res);
			if (e) {
				res.articles.forEach(item => {
					data.lifeList.push(item)
				})
				return
			} else if (!res.articles.length) {
				data.empty = true
				return
			}
			data.lifeList = res.articles
		})
	}

	const _ability = async (e) => {
		await getAbilityArticle({
			currentPage: data.currentPage
		}).then(res => {
			console.log(res);
			if (e && res.articles.length) {
				res.articles.forEach(item => {
					data.abilityList.push(item)
				})
				return
			} else if (!res.articles.length) {
				data.empty = true
				return
			}
			data.abilityList = res.articles
		})
	}

	const _hot = async (e) => {
		await getHotArticle({
			currentPage: data.currentPage
		}).then(res => {
			console.log(res);
			if (e && res.articles.length) {
				res.articles.forEach(item => {
					data.hotList.push(item)
				})
				return
			} else if (!res.articles.length) {
				data.empty = true
				return
			}
			data.hotList = res.articles
		})
	}
	onLoad(async (opt) => {
		data.type = opt.type
		if (opt.type == 0) _life(null);
		if (opt.type == 1) _ability(null);
		if (opt.type == 2) _hot(null);

	})

	onReachBottom(() => {
		console.log("页面触底了");
		data.currentPage++;
		if (!data.empty) {
			if (data.type == 0) _life(true);
			if (data.type == 1) _ability(true);
			if (data.type == 2) _hot(true);
		}
	})
</script>

<style lang="scss" scoped>
	.content{
		// 容器调整
		.container {
			padding: 20rpx;
		}
		
		// 标题样式
		.hedaer_title {
			margin-bottom: 40rpx;
		
			.content {
				.type-title {
					font-size: 40rpx;
					font-weight: bold;
					color: #333;
					position: relative;
					padding-left: 20rpx;
		
					&::before {
						content: '';
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						width: 8rpx;
						height: 36rpx;
						background: #fd547e;
						border-radius: 4rpx;
					}
				}
			}
		}
		
		// 空状态样式
		.empty-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 0  30rpx 0;
		
			.empty-text {
				font-size: 28rpx;
				color: #999;
				margin-top: 20rpx;
			}
		}
	}
</style>